<template>
  <div class="container1">
    <div style="width: 25%; height: 100%; float: left">
      <List></List>
    </div>
    <div style="width: 73%;height:100%; float: right;margin-top: 2%;margin-right: 1%">
      <!-- 组件引入的方式，应提供双方的头像，加载历史消息的方式（函数）和发送消息的方式（函数） -->
      <ChatBox ref="chat"
               :loadHistory="loadHistory" :sendMessage="sendMessage"/>
    </div>
  </div>
</template>
<script>
import ChatBox from './chat.vue'
import List from './list.vue'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import input from "element-ui/packages/input";

export default {
  name: 'ChatDemo',
  components: {
    ChatBox,
    List
  },
  data() {
    return {
      input: '',
      socket: null,
      stompClient: null,
      message: '',
      messages: []
    }
  },
  mounted() {
    this.connect()
  },
  methods: {
    // 定义加载历史消息的方式，该函数应该返回一个对象（`{ messages, hasMore }`），或者是返回该对象的 Promise （异步）。
    loadHistory() {
      this.$bus.$emit('initialization', 1)
      return {
        // 消息数据，字段如下，应以时间的倒序给出。
        messages: [],
        // 定义是否还有历史消息，如果为 false，将停止加载。读者可将其改为 true 演示一下自动滚动更新的效果。
        hasMore: false,
      }

    },
    connect() {
      // 创建 WebSocket 连接
      this.socket = new SockJS('http://localhost:8080/ws');
      // 初始化 STOMP 客户端
      this.stompClient = Stomp.over(this.socket);
      // 连接 STOMP 服务器
      this.stompClient.connect({}, (frame) => {
        console.log('Connected: ' + frame);
        // 订阅某个主题
        this.stompClient.subscribe('/topic/all', (message) => {
          console.log('Received message: ' + message.body);
          this.handleMessage(JSON.parse(message.body));
        });
        // 如果需要订阅特定用户的队列
        const userId = this.$store.state.user.id; // 自己的id
        this.stompClient.subscribe(`/user/${userId}/messages`, (message) => {
          this.handleMessage(JSON.parse(message.body));
        });
      }, (error) => {
        console.error('Error connecting: ' + error);
      });
    },
    handleMessage(message) {
      // 处理接收到的消息
      this.$bus.$emit("handleMessage", message)
    },
    sendMessage(message) {

      // 发送消息到服务器
      if (this.stompClient.connected) {
        this.stompClient.send('/app/message', {}, JSON.stringify(message));
      } else {
        console.error('Not connected');
      }
      return message;
    },
  },
  beforeDestroy() {
    if (this.stompClient !== null) {
      this.stompClient.disconnect();
    }
  },
  // 该函数演示如何加载新消息（一般通过 WebSocket 实时收取）
  receiveMessage(message) {
    this.$refs.chat.appendNew(message)
  }
}
</script>

<style lang="scss" scoped>
.container1 {
  width: 1000px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.9);
  margin-right: 15.5%;
  float: right;
  border-radius: 10px;

}
</style>
